'use strict';
import React, {Component} from 'react';
import {Image, StyleSheet, Text, TouchableNativeFeedback, View} from 'react-native';
import Color from '../../constant/Color';
import CustomSliderModal from "../modal/CustomSliderModal";

/** 定制SeekBarLine */
export class CustomSeekBarLine extends Component {
    constructor(props) {
        super(props);
        this.state = {
            editable: props.editable,
            value: props.value ? props.value : {},          // 数据源
            datas: props.datas ? props.datas : [],          // 默认值
        }
    }

    /** 设置是否可编辑 */
    setEditable(editable: boolean): void {
        this.setState({
            editable: editable,
        })
    }

    /** 设置value */
    setValue(value: Object): void {
        this.setState({
            value: value,
        })
    }

    /** 获取value */
    getValue(): Object {
        return this.state.value;
    }

    _doEdit(): void {
        this.refs.pop.setDatasAndShow(this.props.title, this.state.value, this.state.datas, (value: number) => {
            if (value < 0 || value > this.state.datas.length - 1) return;
            let obj = this.state.datas[value];
            if(typeof obj === undefined) return;
            this.setValue(obj);
            if (this.props.onPress && value) this.props.onPress(obj.toString());
        });
    }

    render() {
        return (
            <TouchableNativeFeedback
                background={TouchableNativeFeedback.SelectableBackground()}
                onPress={() => {
                    this._doEdit()
                }}
                disabled={!this.state.editable}>
                <View
                    style={styles.TitleValueLine}>
                    <Text
                        style={this.state.editable ? styles.TitleValueLineTitleEditable : styles.TitleValueLineTitleUneditable}>{this.props.title}</Text>

                    <View
                        style={styles.TitleValueInnerLine}>
                        <Text
                            style={this.state.editable ? styles.TitleValueLineValueEditable : styles.TitleValueLineValueUneditable}>{this.state.value.toString()}</Text>

                        <Image
                            style={this.state.editable ? styles.TitleValueLineArrowEditable : styles.TitleValueLineArrowUneditable}
                            source={require('../../../../img/ic_chat_audio_right.png')}/>
                    </View>

                    <CustomSliderModal ref="pop"/>
                </View>
            </TouchableNativeFeedback>
        );
    }
}

export class SeekBarItem {
    key: string;
    value: string;
    static item:SeekBarItem;

    constructor(key: string, value: string) {
        this.key = key;
        this.value = value;
    }

    static getTestDatas() {
        SeekBarItem.item = new SeekBarItem("key1", "value1");

        let mDatas = new Set();
        mDatas.add(new SeekBarItem("key0", "value0"));
        mDatas.add(this.item);
        mDatas.add(new SeekBarItem("key2", "value2"));
        mDatas.add(new SeekBarItem("key3", "value3"));

        return mDatas;
    }

    static getOne():SeekBarItem{
        return SeekBarItem.item;
    }

    toString():string{
        return this.key + ", " + this.value;
    }
}

//样式定义
const styles = StyleSheet.create({
    TitleValueLine: {
        height: 60,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: Color.white,
    },
    TitleValueLineTitleEditable: {
        flex: 1,
        color: Color.darkGray,
        fontSize: 14,
    },
    TitleValueLineTitleUneditable: {
        flex: 1,
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueInnerLine: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-end',
    },

    TitleValueLineValueEditable: {
        color: Color.black,
        fontSize: 14,
    },
    TitleValueLineValueUneditable: {
        color: Color.gray,
        fontSize: 14,
    },

    TitleValueLineArrowEditable: {
        width: 10,
        height: 10,
    },
    TitleValueLineArrowUneditable: {
        width: 10,
        height: 10,
        display: 'none',
    },
});

